<template>
  <div class="cat-log">
    <ul>
      <li
        v-for="item in data"
        :key="item.id"
        @click.stop="handleLiClick(item.id)"
      >
        <span
          :class="[
            item.id === activeId ? 'active-index' : '',
            item.id === activeId ? tagClass : ''
          ]"
          :title="item.text"
          >{{ item.text }}</span
        >
        <CatLog
          :data="item.child"
          :active-id="activeId"
          @click="handleLiClick"
          :tag-class="tagClass"
        />
      </li>
    </ul>
  </div>
</template>

<script>
import CatLog from "@/components/CatLog";
export default {
  name: "CatLog",
  components: {
    CatLog
  },
  props: {
    data: {
      type: Array,
      defValue: []
    },
    activeId: {
      type: String,
      defValue: ""
    },
    tagClass: {
      type: String,
      defValue: "tagClass"
    }
  },
  methods: {
    handleLiClick(id) {
      this.$emit("click", id);
    }
  }
};
</script>

<style scoped lang="scss">
.cat-log {
  font-size: 14px;
  max-width: 220px;
  min-width: 160px;
  ul {
    padding: 0 10px 0 10px;
    margin: 2px;
    list-style: none;
    li {
      cursor: pointer;
      span {
        display: inline-block;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        text-align-all: left;
        width: 85%;
      }
    }
  }
}

.active-index {
  display: inline-block;
  color: orange;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
</style>
